<template>
	<div class="bg-[#EFEFEF]" v-if="row">
		<div class="container mx-auto space-y-5 py-5 bg-white p-14 max-md:p-3">
			<div class="gap-5 flex flex-col text-gray-500 min-h-[600px] overflow-hidden">
				<span class="text-black text-base">{{ row.title }}</span>
				<span class="w-full border-t"></span>
				<div class="flex space-x-5">
					<!-- <span>栏目：公司动态 </span> -->
					<span>{{ lg === 0 ? "Release time" : lg === 1 ? "发布时间" : "發布時間" }} : {{ row.update_time }}</span>
				</div>
				<span class="w-full border-t"></span>

				<p v-html="content" v-viewer></p>
			</div>
			<div class="w-full border-t"></div>
			<div class="flex flex-col gap-3 text-[#C1A879] cursor-pointer">
				<div @click="index(1)" class="flex">
					{{ lg === 0 ? "Previous post" : lg === 1 ? "上一篇" : "上一篇" }}
					: <span class="w-1 block"> </span>
					<span v-if="next && next.title">{{ next.title }} </span>
					<span v-else>{{ lg === 0 ? "No article" : lg === 1 ? "暂无文章" : "暫無文章" }}</span>
				</div>
				<div @click="index(2)" class="flex">
					{{ lg === 0 ? "Next chapter" : lg === 1 ? "下一篇" : "下一篇" }}
					:<span class="w-1 block"> </span>

					<span v-if="pre && pre.title">{{ pre.title }} </span>
					<span v-else>{{ lg === 0 ? "No article" : lg === 1 ? "暂无文章" : "暫無文章" }}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			query: {},
			row: {},
			row: {},
			next: {},
			pre: {},
			aid: "",
			content: "",
			prefix: "https://admin.fortunajewellery.net/"
		};
	},
	created() {
		console.log("this.$route.query==> ", this.$route.query);
		this.query = this.$route.query;
		this.indexdd();
	},
	methods: {
		async indexdd() {
			let aid = this.aid;

			const [err, res] = await this.$to(this.$axios.get(`&a=article_details&typeid=${this.query.typeid}&aid=${aid || this.query.aid}`));
			if (err) return this.$message.error(err);
			if (res.code == 0) return this.$message.error(res.msg);
			console.log("res==> ", res);
			this.row = res.data.row;
			const regex = /<video(.*?)src="(.*?)"(.*?)>/g;
			this.content = res.data.row.content.replace(regex, `<video$1src="${this.prefix}$2"$3>`).replace(/text-wrap:\s*nowrap;/g, "");

			// this.content = res.data.row.content.replace("/uploads/", "https://admin.fortunajewellery.net/uploads/");

			this.next = res.data.next;
			this.pre = res.data.pre;
			this.$forceUpdate();
		},
		async index(e) {
			if (e == 1) {
				if (!this.next) return;
				this.aid = this.next.aid;
			} else {
				if (!this.pre) return;
				this.aid = this.pre.aid;
			}
			this.indexdd();
		}
	}
};
</script>

<style lang="scss" scoped>
/deep/video {
	@apply aspect-video;
}
</style>
